Envision Documentation

by Orkun Gursel / support@wptation.com

  1. Welcome
  2. Getting Started
  3. Creating Pages
  4. WooCommerce
  5. Content Composer
  6. Shortcode Generator
  7. Revolution Slider
  8. Built-in Slider Manager
  9. Customization
  10. Menus
  11. Mega Menus
  12. Sidebars and Widgets
  13. Custom Login Pages
  14. Side Panel
  15. Fullwidth Sections with Parallax Effect
  16. How-to
Welcome

Thank you for purchasing

Thank you for purchasing Envision Theme. I hope you like it.

If you have any question or problem about the theme, please contact us by using our support center. However before getting support, please read this documentation and watch video tutorials.

Enjoy it!

"Orkun Gursel - Signature"

Welcome

Requirements

  • PHP 5.2.4 or greater
  • MySQL 5.0 or greater
  • WordPress 3.4 or greater
Getting Started

Downloading from ThemeForest

Download the Envision theme package from ThemeForest and unzip it. Any good quality zip program will do. Just follow the unzip instructions of your program carefully. Some give you the option of unzipping only a portion, or all, of the files. You want to select "all". Once unzipped, you will find the following folders will be in the unzipped directory:

  • envision.zip - the zip file of the theme
  • envision-child.zip - the zip file of child theme
  • documentation/ - theme documentation
  • licensing/ - licenses for the theme
  • resources/
    • sample skins/ - importable skin files
    • sample sliders/ - importable slider files
      • revolution slider/ - importable slider files for revolution slider
    • psd/ - all psd files of the theme
    • dummy data/ - importable xml files for sample datas
  • tools/ - tools to help you
    • searchreplacedb.php - PHP script for searching and replacing mysql database fields smoothly
  • change log/ - changelog files for the theme versions
Getting Started

Installation

To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress

When you are ready to install a theme, you must first upload the theme files and then activate the theme itself. The theme files can be uploaded in two ways:

  • FTP Upload: Unzip the envision.zip file and using a FTP client software, upload the unzipped theme folder into the /wp-content/themes/ folder on your server.

    The folder must be like this: (/wp-content/themes/envision/)

  • WordPress Upload: Navigate to AppearanceAdd New ThemesUpload. Go to browse, and select the zipped theme file in the package (envision.zip). Hit “Install Now” and the theme will be uploaded and installed.

Once the theme is uploaded, you need to activate it. Go to AppearanceThemes and activate your chosen theme.

More Info: Using Themes http://codex.wordpress.org/Using_Themes

Getting Started

Install Sample/Dummy Content

  • 1. step: Go to Control PanelDahsboard (Also the importer can be found in Control PanelSystemDemo Contents tab.)
  • 2. step: Select the content types which you wish to import and hit button
  • 3. step: Hit button to import contents.

Important: DO NOT INSTALL demo contents to your live website. It will corrupt your existing data(pages, widgets, skins, sliders and options). We suggest you install demo contents only on a clean WordPress setup. We do not hold any responsibility if you lost existing data.

1
2

Creating Pages  ·  Home page

Setting up Homepage

To set up the homepage you must create a new page, you can do so by navigating to PagesAdd New

You can give this page a title yet you do not have to include any content. Select the a template from the Page. And click or

You can create the homepage's content using the content composer or classic wordpress editor. (See: using of the content composer)

Creating Pages  ·  Home page

Setting the homepage as static page

After creating your home page, navigate to SettingsReading, set Front page displays: A static page, and select your home page as front page.

Your homepage can be viewed by visiting your root URL.

Creating Pages  ·  Blog page

Setting up Blog Page

To set up the blog, you must create a new page with no content, you can do so by navigating to PagesAdd New. Name it "Blog" and set a template for the page and click

Creating Pages  ·  Blog page

Displaying blog posts on the blog page

After creating your blog page, navigate to SettingsReading, set Front page displays: A static page, and select your page named Blog as posts page.

Your blog index can be viewed by visiting the page you just published.

Creating Pages  ·  Blog page

Creating multiple blog pages

Creating Pages  ·  Portfolio page

Setting up Portfolio Page

  1. To set up the main portfolio page, you must create a new page, you can do so by navigating to PagesAdd New. Name it as "Portfolio" or another name you wish. And hit button.

  2. After creating the main portfolio page, go to Control PanelPortfolioGeneral Portfolio Settings and select your portfolio page for the Porfolio Page option.

  3. Back to portfolio edit page ( PagesAll PagesPorfolioEdit )

  4. Add a Portfolio module to the page by using the content composer. (See: using of the content composer)

  5. You can change the portfolio widget's options to customize your portfolio page.

  6. Now, we should create some portfolio posts to display them on the main portfolio page. (See: creating portfolio posts)

Creating Pages  ·  Portfolio page

Creating portfolio posts

  1. To create a portfolio post, navigate to PortfolioAdd New page,
  2. Insert a title for your portfolio post,
  3. Set a featured image,

    1
    2
    3

  4. Set the post options

  5. And hit button.

Creating Pages  ·  Contact page

Setting up Contact Page

  • You should use Contact Form 7 plugin for contact form.
  • After installing it, go to ContactAdd new (or edit current form) page to create a contact form.
  • Than add the Contact Form widget using the content composer to embed the form into your page.

1
2
3

  • And hit and save your page.
WooCommerce

Installing WooCommerce and Demo Products

Content Composer

Export page contents

  • Click Export All button.

    1

  • Copy all generated datas.

    2

Content Composer

Import page contents

  • Click Import button.

    1

  • Paste your exported data here and click import button.

    2

Content Composer

Save / load the composer's templates

Content Composer

Importing Pre-Built Pages

  • Click Pre-Built Pages button.
    1
    2
Shortcode Generator

Using Shortcode Generator

You can see the shortcode generator button at the top of all pages of your admin panel. Just hit the Shortcode Generator button and generate your shortcode easily.

Shortcode Generator

Using of the Shortcode Generator

Shortcode Generator

Shortcodes and Attributes

CSS Entrance Effect

[fx effect='' delay='' start_delay='']      

Buttons

[button size='' color='' link='' target='' align='' radius='' block='' icon_position='' icon='' shadow='' title='' custom_effect='' margin_top='' margin_bottom='']Content[/button]     

Divider

[divider color='' fullwidth='' device='' margin_top='' margin_bottom='']        

[mini_divider color='' fullwidth='' device='' margin_top='' margin_bottom='']       

[dotted_divider color='' fullwidth='' device='' margin_top='' margin_bottom='']     

[dashed_divider color='' fullwidth='' device='' margin_top='' margin_bottom='']     

[fade_divider color='' fullwidth='' device='' margin_top='' margin_bottom='']       

[fade_dotted_divider color='' fullwidth='' device='' margin_top='' margin_bottom='']        

Text Block + Icon

[text_block icon='' link='' lightbox='' position='' title='' title_color='' title_position='' content_align='' tag='' effect_icon='' effect_title='' effect_text='' margin_top='' margin_bottom='']Content[/text_block]     

Icon

[icon icon='']      

Lists

[list type='' icon_color='' border='']Content[/list]        

Message Boxes

[info title='' icon='' shadow='']Content[/info]     

[success title='' icon='' shadow='']Content[/success]       

[error title='' icon='' shadow='']Content[/error]       

[caution title='' icon='' shadow='']Content[/caution]       

Blank Space

[space height='' height_tablets='' height_phones='']        

Text Rotator

[text_rotator effect='' speed='' color='' border_color='' border_style='' border_width='' block='']Content[/text_rotator]       

Custom Titles Typography

[dropcap color='' background='']Content[/dropcap]       

[highlight color='' background='']Content[/highlight]       

[highlight1 color='' background='']Content[/highlight1]     

[highlight2 color='' background='']Content[/highlight2]     

[highlight3 color='' background='']Content[/highlight3]     

[blockquote color='' background='']Content[/blockquote]     

[pullquote_left color='' background='']Content[/pullquote_left]     

[pullquote_right color='' background='']Content[/pullquote_right]       

[pre color='' background='']Content
[/pre]

[code color='' background='']Content[/code]     

Sharing Services

[sharrre type='' counter='' align='' margin_top='' margin_bottom='']        

Blog

[blog layout='' from='' category='' columns='' limit='' pagination='' title_element='' title_align='' excerpt_length='' show_excerpt='' meta_author='' meta_date='' meta_category='' meta_comment='' meta_likes='' image_ratio='' video_ratio='' list_style='' shadow='' margin_top='' margin_bottom='']        

Like the Post

[like_the_post likes_layout='']     

Portfolio

[portfolio orderby='' order='' layout='' from='' id_cat='' id_filter='' id_post='' id_selected='' filters='' filters_position='' filters_style='' filters_title='' columns='' limit='' height='' pagination='' title_element='' title_align='' default_icon='' default_button_text='' show_desc='' show_caption='' image_ratio='' video_ratio='' link_target='' gallery_rotate='' shadow='' margin_top='' margin_bottom='']     

Contact Form

[contact-form-7 id='']      

Gallery

[cfw_gallery device='' columns='' width='' height='' lightbox='' carousel='']Content[/cfw_gallery]      

Get Page Content

[the_content id='']     

Google Map

[gmap maptype='' height='' address='' latitude='' longitude='' zoom='' marker='' html='' shadow='' doubleclickzoom='' fullwidth='' scrollwheel='' controls='' pancontrol='' zoomcontrol='' maptypecontrol='' scalecontrol='' streetviewcontrol='' overviewmapcontrol='' stylers='' stylers_hue='' stylers_saturation='' stylers_lightness='' stylers_labels_text_color='' stylers_labels_stroke_color='' stylers_road_labels='' stylers_road_lightness='' margin_top='' margin_bottom='']       

Single Image

[image id='' class='' floating='' device='' margin_top='' margin_bottom='' margin_left='' margin_right='' src='' retina='' link='' position='' style='' alt='' title='' resize='' lightbox='' lightbox_group='' resize_width='' resize_height='' shadow='']     

Logical Condition

[condition condition='' if_false_call_page='']      

Progress Bar

[toggle percent='' value='' height='' stripe='' gradient_start='' gradient_stop='' margin_top='' margin_bottom='']Content[/toggle]      

Circle Progress Bar

[toggle percent='' size='' rotate='' bar_width='' bar_color='' track_color='' label='' margin_top='' margin_bottom='']Content[/toggle]      

Slider

[slider id='']Content[/slider]      

Social Services

[socialbar size='' align='' color='' radius='' effect='' start_color='' end_color='' hover_start_color='' hover_end_color='' border_color='' custom_effect='']Content[/socialbar]       

Testimonial

[testimonial name='' caption='' image='']Content[/testimonial]      

Toggle

[toggle title='' state='' icons='' group='' device='' margin_top='' margin_bottom='']Content[/toggle]       

Video

[video type='' url='' autoplay='' shadow='']Content[/video]     

HTML5 Video/Audio

[html5_player type='' source_m4v='' source_ogv='' source_webmv='' poster='' autoplay='' shadow='' margin_top='' margin_bottom='']       

Widgetized Areas

[widget sidebar='']     

Single Columns

[1of2]Content[/1of2]        

[1of2_last]Content[/1of2_last]      

[1of3]Content[/1of3]        

[1of3_last]Content[/1of3_last]      

[1of4]Content[/1of4]        

[1of4_last]Content[/1of4_last]      

[1of5]Content[/1of5]        

[1of5_last]Content[/1of5_last]      

[1of6]Content[/1of6]        

[1of6_last]Content[/1of6_last]      

Responsive Content

[responsive device='']Content[/responsive]      

Fullwidth Section

[section id='' class='' style_id='' device='' margin_top='' margin_bottom='' padding_top='' padding_bottom='']Content[/section]     

Boxed Content

[boxed_content id='' class='' device='' radius='' shadow='' shadow_color='' shadow_direction='' gradient_start='' gradient_stop='' bg_image='' bg_position='' bg_attachment='' border_color='' border_style='' border_width='' link='' target='' height='' color='' link_color='' link_hover_color='' margin_top='' margin_bottom='' padding_top='' padding_bottom='']Content[/boxed_content]       

Twitter Timeline

[twitter_timeline username='' style='' columns='' count='' avatars='' carousel='' effect='' auto_rotate='' rotate_time='' arrows='']        

Revolution Slider

Using of Revolution Slider Plugin

Revolution Slider

Importing demo Revolution Sliders

You can find importable revolution slider files inside resources/sample sliders/revolution slider folder in the theme package that downloaded from ThemeForest.

You can find importable revolution slider files inside resources/sample sliders/revolution slider folder in the theme package that downloaded from ThemeForest.

Built-in Slider Manager

Creating a slider

  1. To create a slider, navigate to Slider Manager, and hit the button.

  2. Insert a name for your new slider and select a slider type. Then hit button again.

  3. Now, you will see the slider options for your new slider. Set the options and save the slider.

  4. We can pass the next step: creating slider items.

Built-in Slider Manager

Creating slider items

  1. After our slider created, we should create some slides for our slider. For that we must go to slider items managing page. And hit button.

  2. Upload your image and set other item options and hit button.

  3. After creating slider items, you can sort your slider items by drag drop method.

  4. How to insert sliders into your pages

Built-in Slider Manager

Insert sliders into your pages

  1. To insert a slider into your pages, you should add Slider module into your pages via the content composer.

  2. After adding the Slider module, hit to Options icon, then you will see module options.

  3. Select the slider name that you wish to insert your pages. And save the page.

Also you can insert a slider into your pages via [slider] shortcode. (See: how to create shortcodes)

Built-in Slider Manager

Importing sliders

You can find demo slider files inside resources/sample sliders/ folder in the theme package that downloaded from ThemeForest.

  1. Go to Slider Manager, and hit button.

  2. Selet one of importable slider file, and hit button again.

You can find demo slider files inside resources/sample sliders/ folder in the theme package that downloaded from ThemeForest.

Customization  ·  Visual Settings

Creating new visual set

  1. Go to Control PanelVisual SettingsAll Visual Sets, and hit button.

  2. Type a name for your set and hit button again.

  3. After creating your new set, click to edit icon to see all visual options.

Customization  ·  Visual Settings

Importing visual set

You can find pre-defined importable visual setting files inside resources/sample skins/ folder in the theme package that downloaded from ThemeForest.

  1. Go to Control PanelVisual SettingsAll Visual Sets, and hit button.

  2. Selet one of importable visual setting file, and hit button again.

You can find pre-defined importable visual setting files inside resources/sample skins/ folder in the theme package that downloaded from ThemeForest.

Customization  ·  Typography Settings

Installing Fonts from Google Webfonts

Customization  ·  Typography Settings

Installing Fonts from Premium Services

Menus

Menu Locations

This theme has 2 menu locations

  • Navigation Menu - This is main navigation thats located in the header
  • Footer Menu - This is located at the bottom above copyright text. This menu does not support dropdown
Mega Menus

Creating Mega Menus

To enable mega menus, please follow these instructions:

  • Go to AppearanceMenu page.
  • Create a menu via wordpress' builtin menu manager.
  • Set this menu for Navigation Menu location. (This is important. If you don't set your menu as Navigation Menu you cannot see the mega menu options)
  • Now you can see the mega menu options in the options of menu items.

Mega Menus

Creating Mega Menus with Custom Page Content

Sidebars and Widgets

Theme Sidebars

The theme has 13 sidebars by default. Also, you can create your own custom sidebars under the Theme Control PanelGlobal SettingsSidebar Manager tab and can use them in your pages whatever you want.

Sidebars and Widgets

Adding widgets into sidebars

You can add widgets into a sidebar area by the drag and drop action. Also, when you click to the widget titles, you will see the sidebar list. Just select one of them to add your widget to a sidebar.

Sidebars and Widgets

Creating custom sidebars

To crete a custom sidebar, navigate to Control PanelGlobal SettingsSidebar Manager

Sidebars and Widgets

Playing with Widgets

Side Panel

Setting Up the Side Panel

Fullwidth Sections with Parallax Effect

Fullwidth Sections with Parallax Effect

How-to  ·  Move your website to another server smoothly

Step 1: Export Local WordPress Database

First thing you need to do is export your local WordPress database. We will be using phpMyAdmin to do that. If you are unfamiliar with it, then you might want to take a look at our guide to WordPress database management using phpMyAdmin. Simply go to http://localhost/phpmyadmin/ and click on your WordPress database. Next, click on the Export button from the top menu bar.

In the Export Method option choose custom, which will provide you with more options to export your database. Select all tables to export and gzipped for compression. Scroll down to the bottom of the page and press the Go button to download your database.

How-to  ·  Move your website to another server smoothly

Step 2: Uploading WordPress Files to Live Site

Now open an FTP client and connect to your live site. Once you are connected to your live site, make sure you upload the files in the right directory. For example if you want the site to be hosted on yoursite.com, then you would want to upload all files in your public_html directory. Now select your local WordPress files and upload them to your live server.

How-to  ·  Move your website to another server smoothly

Step 3: Creating MySQL Database on Live Site

While your FTP client is uploading your WordPress files, you can spend this time on importing your database to the live server. Most WordPress hosting providers offer cPanel to manage your hosting account, so we will show you how to create a database using cPanel. Log in to your cPanel dashboard and click on the MySQL databases icon which can be found in the databases section.

On the next screen, create a database by entering a name for your database.

After creating a database, scroll down to MySQL users section and create or add an existing user to the database. After adding the user, cPanel will take you to set MySQL privileges for that user. Simply grant all privileges to the user.

How-to  ·  Move your website to another server smoothly

Step 4: Importing WordPress Database on Live Site

Next step in the process is to import your WordPress database. Go to your cPanel dashboard, scroll down to the databases section and click on phpMyAdmin. This will take you to phpMyAdmin where you want to click on the database you created earlier. phpMyAdmin will show your new database with no tables. Click on the Import tab in the top menu. On the import page, click on choose file button and then select the gzipped database file you saved in step 1. Lastly, press the Go button at the bottom of the page. phpMyadmin will now import your WordPress database.

How-to  ·  Move your website to another server smoothly

Step 5: Changing the Site URL

Now you need to change the site URL, so you can setup your live WordPress site.

To change the site URL smoothly, a PHP script named as searchreplacedb.php has been added to /resources/tools/ folder in the theme package downloaded from ThemeForest.

To use the script, you should put it in the root folder of your WordPress install (if you wish it to automatically pick up your wp-config) or anywhere else you fancy, but you won’t get the automatic config. You should also, to protect yourself from automated scanners looking for this script, rename it first. eg, you could name it as rrrrreplace.php – you’d then visit a url like http://example.com/rrrrreplace.php and follow the on-screen instructions from there.

What you absolutely, 100% certainly MUST do is to delete the script once you’ve finished. If somebody chances on it they can do anything to your database – and that wouldn’t be nice, would it?


Why we should use this script to change the site URL?

When you’re migrating WordPress (or any other platform using serialized PHP strings in the database) between domains, you must use a safe search and replace method that preserves the integrity of the serialized string lengths. A simple of a dump file for http://localhost to, for example, http://thenewdomain.com is problematic because the length of the string changes but the indexes for the serialized strings does not. Consequently settings are lost and widgets disappear. Not good.

This script can now also handle multiply nested serializations, which can happen in transient values in WP at times, and it can also handle multi-byte Unicode changes safely. This is important now that internationalised domain names are allowed.

How-to  ·  Move your website to another server smoothly

Step 6: Setting Up your Live Site

Now that we have imported the database, and all of our content should be uploaded, it is time to configure WordPress. At this time, your site should be showing an Error Establishing Database Connection error. To fix this, connect to your website using an FTP client and edit wp-config.php file. Provide the database name, user and password you created earlier in Step 3. Save the wp-config.php file and upload it back to your server. Visit your website, and it should be live now.

Login to your WordPress admin panel, and go to SettingsGeneral. Click save Options. This will ensure that the site url is corrected anywhere else that needs to be. Then go to SettingsPermalink and click Save to ensure that all post links are working fine.

How-to

How to use different visual set on a page

The theme Envision supports to use different visual sets on pages.

  1. First, create a visual set.

  2. Go to page editing, you will see Custom Skins section at the right-top of page. Select a different skin from your primary skin here to use it on the page.

How-to

How to import custom icon set